<template>
  <div class="login">
    <div class="card">
      <h2>后台管理系统</h2>
      <div class="content">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input @input="name" v-model="ruleForm.username" @keyup.native.enter="submitForm('ruleForm')"
              placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"
              @keyup.native.enter="submitForm('ruleForm')"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
        <el-checkbox v-model="checked">记住密码</el-checkbox>
        <br>
        <el-link href="#/register">去注册</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginAPI } from '@/api/index'
import { mapMutations } from 'vuex'
import { mapGetters } from 'vuex';
export default {
  name: 'Login',
  data() {
    return {
      ruleForm: {
        password: '',
        username: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ]
      },
      checked: false,
      remenber: {}
    }
  },
  methods: {
    ...mapMutations(['getToken']),
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 发起请求
          let { data } = await getLoginAPI(this.ruleForm)
          if (data.code === 0) {
            this.$message({
              message: data.message,
              type: 'success'
            })
            // 将token存储到vuex里
            this.getToken(data.token)
            this.$router.push('/home')
            // 跳转主页
            if (this.checked) {
              this.setCookie(this.ruleForm.username, this.ruleForm.password, 3)
            }
          } else {
            this.$message.error('登录失败')
          }
        } else {
          return false;
        }
      })
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    name() {
      let tr = document.cookie
      tr = tr.split('; ')
      let obj = {}
      tr.forEach(item => {
        let nim = item.split('=')
        obj[nim[0]] = nim[1]
      })
      if (this.ruleForm.username === obj.userName) {
        this.$set(this.ruleForm, 'password', obj.userPwd)
      } else {
        this.$set(this.ruleForm, 'password', '')
      }
    }
  },
  computed: {
    ...mapGetters(['login'])
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100%;
  background-image: url('https://img0.baidu.com/it/u=828240000,4163445898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=278');
  background-size: cover;

  .card {
    box-sizing: border-box;
    padding: 10px 50px 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    background-color: #fff;
    box-shadow: 0 0 10px 2px rgb(126, 126, 126);

    h2 {
      color: rgb(40, 194, 255);
      text-align: center;
    }

    .el-form-item.btn {
      margin-bottom: 10px;

      button {
        width: 100%;
      }
    }
  }


}
</style>